<template>
    <div class="itemMusicTop">
        <img :src="playlist.coverImgUrl" alt="" class="bgimg">
        <div class="itemMusicHigh">
            <div class="itemLeft">
                <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
                    <use xlink:href="#icon-zuojiantou"></use>
                </svg>
                <span>歌单</span>
            </div>
            <div class="itemRight">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sousuo"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-31liebiao"></use>
                </svg>
            </div>
        </div>
        <div class="itemMusicMiddle">
            <div class="leftImg">
                    <img :src="playlist.coverImgUrl" alt="">
                    <span class="playCount">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-play"></use>
                        </svg>
                        {{changeCount(playlist.playCount)}}
                    </span>
            </div>
            <div class="itemDetail">
                <span class="titleName">{{playlist.name}}</span>
                <div class="authorInfo">
                    <img v-if="playlist.creator" :src="playlist.creator.avatarUrl" alt="">
                    <span v-if="playlist.creator">
                        {{playlist.creator.nickname}}
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-youjiantou"></use>
                        </svg>
                    </span>
                </div>
                <div class="description">
                    <span>{{playlist.description}}</span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youjiantou"></use>
                    </svg>
                </div>
            </div>
        </div>
        <div class="itemMusicBottom">
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-message"></use>
                </svg>
                <span>{{playlist.commentCount}}</span>
            </div>
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-iconfontfenxiang"></use>
                </svg>
                <span>{{playlist.shareCount}}</span>
            </div>
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiazai"></use>
                </svg>
                <span>下载</span>
            </div>
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-show_duoxuan"></use>
                </svg>
                <span>多选</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:['playlist'],
    setup(props) {
        console.log(props)
        function changeCount(num){
                if(num>=100000000){
                    return  (num/10000000).toFixed(1)+"亿"
                }else if(num>=10000){
                    return (num/100000).toFixed(1)+"万"
                }
            }
            return{changeCount}
    },
}
</script>
<style lang="less" scoped>
    .itemMusicTop{
        width: 100%;
        // padding: .2rem;
        position: relative;
        .itemMusicHigh{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 1rem;
            .itemLeft,.itemRight{
                width: 25%;
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 0 .2rem;
                span{
                    font-size: .4rem;
                    color: #fff;
                }
                .icon{
                    fill: #fff;//填充颜色，修改图标颜色
                }
            }
        }
        .bgimg{
            width: 100%;
            height: 6.2rem;
            position: fixed;
            z-index: -1;
            filter: blur(30px);//背景虚化
        }
        .itemMusicMiddle{
            display: flex;
            justify-content: space-between;
            height: 3rem;
            width: 100%;
            padding: 0.2rem;
            color: #fff;
            margin-top: 0.2rem;
            .titleName{
                font-weight: 550;
            }
            .leftImg{
                width: 35%;
                margin-right: .5rem;
                position: relative;
                img{
                    height: 100%;
                    border-radius: .3rem;
                }
                .playCount{
                        position: absolute;
                        color: #fff;
                        left: 0.8rem;
                        top: 0.1rem;
                        .icon{
                            // 设置文字和图标中线对齐
                            vertical-align: middle;
                            fill: #fff;
                        }
                }
            }
            .itemDetail{
                height: 100%;
                overflow: hidden;
                .authorInfo{
                    height: 25%;
                    margin: .2rem 0;
                    img{
                        height: 100%;
                        border-radius: 50%;
                        margin-right: .1rem;
                        vertical-align: middle;
                    }
                    span{
                        color: rgb(172, 169, 169);
                        font-size: .3rem;
                        .icon{
                            fill:rgb(172, 169, 169);
                            width: .25rem;
                            vertical-align: middle;
                        }
                    }
                }
                .description{
                    height: 25%;
                    display: flex;
                    justify-content: space-between;
                    span{
                        color:rgb(172, 169, 169);
                        font-size: .27rem;
                        width: 90%;
                    }
                    .icon{
                        fill:rgb(172, 169, 169);
                        width: .25rem;
                    }
                }
            }
        }
        .itemMusicBottom{
            display: flex;
            justify-content: space-around;
            margin: .3rem .1rem;
            .icon{
                fill: #fff;
            }
            div{
                display: flex;
                flex-direction: column;
                span{
                    color: #fff;
                    margin-top: .1rem;
                }
            }
        }
    }
</style>